import * as React from 'react';

import {Selection as AttachmentsSelection } from './attachments';

export interface SelectionProps {
    editable: boolean;
    clearable: boolean;
    attachments: any[];
}


export interface SelectionState {

}

export class Selection extends React.Component<SelectionProps, SelectionState> {
    render() {
        let className = "media-selection";
        let {attachments = []} = this.props;
        if (!attachments.length) {
            className += ' empty';
        }
        if (attachments.length === 1) {
            className += ' one';
        }

        return (
            <div className={className}>
                <div className="selection-info">
                    <span className="count">已选{attachments.length}个</span>
                    {this.props.editable ? <button type="button" className="button-link edit-selection">编辑所选</button> : null}
                    {this.props.clearable ? <button type="button" className="button-link clear-selection">清空</button> : null}
                </div>
                <div className="selection-view">
                    <AttachmentsSelection attachments={attachments} />
                </div>
            </div>
        )
    }
}
